<template>
  <!-- <div class="index-box">
    <main>
      <Head :headIndex="2" @choseIndex="choseIndex"></Head>
    </main>
    <div style="height: 800px; background-color: beige; "></div>

    <footer>
      <Foot></Foot>
    </footer>
  </div> -->
  <div>
    <Head :headIndex="1"></Head>
    <div class="login-box">
      <div class="login-image"></div>
      <!-- 密码登录，手机号登录 -->
      <div class="login-code" v-show="showWechat">
        <el-image :src="wechat" class="login-wechat" @click="cutWechat(0)" />
        <div class="login-webox">
          <el-image :src="slice" class="login-slice" />
          <span class="login-welcome">欢迎您登录～</span>
        </div>
        <div class="login-switchover">
          <div class="login-password">
            <!-- 密码登录，手机号登录 -->
            <div class="login-codebox">
              <span
                v-for="(item, index) in switchList"
                :key="index"
                :class="choseLogin == index ? 'loginIndex' : 'loginoIndex'"
                @click="choseItem(item, index)"
                >{{ item.name }}</span
              >
            </div>

            <!-- <el-image :src="small" class="login-small" /> -->
            <!-- 默认显示手机号登录 -->
            <div v-show="choseLogin == 1">
              <el-input
                placeholder="请输入手机号"
                clearable
                class="login-phone"
              >
                <template #prepend>
                  <el-select v-model="select" class="login-select"> </el-select>
                </template>
              </el-input>
              <el-input
                placeholder="请输入短信验证码"
                clearable
                class="login-phone"
              >
                <template #append>
                  <span class="get-code" @click="startCountdown">{{
                    buttonText
                  }}</span>
                </template>
              </el-input>
            </div>
            <div v-show="!choseLogin">
              <el-input
                placeholder="请输入账号"
                clearable
                prefix-icon="User"
                class="login-phone"
              />
              <el-input
                type="password"
                placeholder="请输入密码"
                clearable
                show-password
                class="login-phone"
                prefix-icon="Unlock"
              />
            </div>
          </div>
        </div>
        <div class="forget">
          <div class="" @click="goRegister">
            <span class="uneven">还没有账号？</span>
            <span class="even">去注册</span>
          </div>
          <span class="gray" @click="goReset">忘记密码？</span>
        </div>
        <div>
          <el-button type="primary" class="login-sign">立即登录</el-button>
        </div>
        <div>
          <el-radio label="1" size="large" class="login-radio">
            <span class="uneven">我接受</span>
            <span class="even">《服务协议》</span>
            <span class="uneven">和</span>
            <span class="even">《个人信息保护费》</span>
          </el-radio>
        </div>
      </div>
      <!-- 微信扫码 -->
      <div class="login-wechatcode" v-show="!showWechat">
        <el-image :src="slice" class="login-slice" />
        <!-- 二维码 -->
        <div v-show="bindPhone" class="codebox">
          <span class="wechatText">微信二维码登录</span>
          <span class="textWork">开启你的驻场工作~</span>
          <div class="wechat-code"></div>
          <el-button
            type="primary"
            link
            icon="ArrowLeft"
            class="back"
            @click="cutWechat(1)"
            >切换账号密码登录</el-button
          >
        </div>
        <!-- 扫码成功后绑定手机号 -->
        <div v-show="!bindPhone" class="codebox">
          <span class="wechatText">{{ isbind }}</span>
          <el-input placeholder="请输入手机号" class="bindIng">
            <template #prepend>
              <el-select v-model="select" class="login-select"> </el-select>
            </template>
          </el-input>
          <el-input placeholder="请输入短信验证码" class="bindIng">
            <template #append>
              <span class="get-code" @click="startCountdown">{{
                buttonText
              }}</span>
            </template>
          </el-input>
          <el-button type="primary" class="binding-sure">确定</el-button>
          <el-button
            type="primary"
            link
            icon="ArrowLeft"
            class="sureIcon"
            @click="backWechat"
            >返回</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import Head from "@/components/head.vue";
import Foot from "@/components/foot.vue";
import { wechat, slice, small } from "@/config/userFileImg.js";

const router = useRouter();
const switchList = ref([{ name: "密码登录" }, { name: "手机号登录" }]);
const choseLogin = ref(1);
const showWechat = ref(true);
const bindPhone = ref(false);
const isbind = ref("" || "绑定手机号");
// 获取验证码倒计时
const select = ref("中国大陆86");
// 设置倒计时的初始值
const isCounting = ref(false);
const buttonText = ref("获取验证码");
const timer = ref(null);
const startCountdown = () => {
  if (!isCounting.value) {
    buttonText.value = "60秒后重发";
    isCounting.value = true;
    let secondsLeft = 60;
    timer.value = setInterval(() => {
      secondsLeft--;
      buttonText.value = `${secondsLeft}秒后重发`;
      if (secondsLeft === 0) {
        clearInterval(timer.value);
        buttonText.value = "获取验证码";
        isCounting.value = false;
      }
    }, 1000);
  }
};
const cutWechat = (value) => {
  if (value) {
    showWechat.value = true;
  } else {
    showWechat.value = false;
  }
  // console.log(index, "45545454");
};
const backWechat = () => {
  bindPhone.value = true;
};
// 去注册
const goRegister = () => {
  isbind.value = "注册账号";
  showWechat.value = false;
  bindPhone.value = false;
};
const choseIndex = (index) => {
  console.log(index, "45545454");
};
const choseItem = (item, index) => {
  choseLogin.value = index;
};
// 忘记密码
const goReset = () => {
  // console.log(router.push);
  router.push("/reset");
};
</script>
<style lang="scss" scoped>
.index-box {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 至少与视口高度相同 */
}
.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 至少与视口高度相同 */
}

main {
  flex: 1; /* 占据可用空间 */
}

footer {
  margin-top: auto; /* 推到底部 */
  /* 可以添加其他样式，如背景颜色、边距等 */
}
// 登录
.login-box {
  display: flex;
  align-content: center;
  justify-content: space-between;
}
.login-image {
  width: 1400px;
  height: calc(100vh - 72px);
  background-size: cover;
  background-image: url("@/assets/login.png");
}
.login-code {
  margin-right: 150px;
  margin-top: 15%;
  padding: 60px 32px 40px 32px;
  width: 352px;
  height: 372px;
  background: #ffffff;
  box-shadow: 0px 2px 33px 0px rgba(0, 0, 0, 0.04);
  border-radius: 16px 16px 16px 16px;
  position: relative;
  display: flex;
  align-items: left;
  flex-direction: column;
  // gap: 33px;
}
.login-wechatcode {
  margin-right: 150px;
  margin-top: 15%;
  padding: 40px 0 36px 0;
  width: 352px;
  height: 392px;
  background: #ffffff;
  box-shadow: 0px 2px 33px 0px rgba(0, 0, 0, 0.04);
  border-radius: 16px 16px 16px 16px;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.codebox {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 20px;
}
.login-wechat {
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;
  height: 56px;
  cursor: pointer;
}
// 欢迎您登录～
.login-webox {
  display: flex;
  align-items: center;

  .login-welcome {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 20px;
    color: #333333;
    font-style: normal;
    text-transform: none;
    margin-left: 4px;
  }
}
.login-slice {
  width: 88px;
  height: 28px;
}
// 切换
.login-switchover {
  padding-top: 33px;
}
.login-codebox {
  width: 170px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  > span {
    cursor: pointer;
  }
}
.login-password {
  display: flex;
  align-items: left;
  flex-direction: column;
  position: relative;

  .login-small {
    width: 22px;
    height: 8px;
    position: absolute;
    top: 20px;
    left: 20px;
  }
}
.loginIndex {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 18px;
  color: #333333;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
.loginoIndex {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #333333;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
.login-phone {
  margin-top: 24px;
  width: 320px;
  height: 48px;
  background: #f5f7fa;
  border-radius: 6px 6px 6px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordIcon {
  width: 30px;
}

.bindIng {
  margin-top: 24px;
  width: 290px;
  height: 48px;
  background: #f5f7fa;
  border-radius: 6px 6px 6px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.login-select {
  width: 117px;
  box-shadow: none;
}
.get-code {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #165dff;
  font-style: normal;
  text-transform: none;
  cursor: pointer;
}
.login-sign {
  margin-top: 50px;
  width: 320px;
  height: 44px;
  background: #165dff;
  border-radius: 6px 6px 6px 6px;
  // margin-top: 52px;
}
.binding-sure {
  width: 290px;
  height: 44px;
  background: #165dff;
  border-radius: 6px 6px 6px 6px;
  margin-top: 52px;
}
.sureIcon {
  margin: auto;
  width: 290px;
  height: 44px;
}
.back {
  margin: auto;
  width: 290px;
}
.login-radio {
  > span {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #333333;
    font-style: normal;
    text-transform: none;
  }
}
.uneven {
  color: #333333;
}
.even {
  color: #165dff;
}
.gray {
  color: #86909c;
}
.forget {
  width: 318px;
  padding-top: 12px;
  display: flex;
  align-content: center;
  justify-content: space-between;

  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  font-style: normal;
  // background: aqua;
  cursor: pointer;
}
.wechat-code {
  margin: 26px;
  width: 212px;
  height: 212px;
  background: rgba(22, 93, 255, 0.05);
  border-radius: 12px 12px 12px 12px;
}
.wechatText {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 20px;
  color: #333333;
  font-style: normal;
  text-transform: none;
}
.textWork {
  margin-top: 8px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: #86909c;
  font-style: normal;
  text-transform: none;
}
</style>

<style scoped>
::v-deep .el-input-group__prepend {
  box-shadow: none;
}
::v-deep .el-input__wrapper {
  background-color: #f5f7fa;
  box-shadow: none;
}

::v-deep
  .el-input-group--prepend
  .el-input-group__prepend
  .el-select
  .el-select__wrapper {
  box-shadow: none;
}
::v-deep .el-input-group__append {
  box-shadow: none;
}
</style>
